<template>
  <div>
    <div style="text-align: right;margin-bottom: 12px;">
      <b-button @click="addDataSource" pill variant="dark">
        <i class="ri-add-line align-middle" style="font-size: 1rem;margin-right:6px;"></i>创建数据源
      </b-button>
    </div>
    <div class="table-responsive">
      <b-table
        class="table-centered"
        :items="ordersData"
        :fields="fields"
        responsive="sm"
        :per-page="perPage"
        :current-page="1"
        thead-class="thead-light"
        @filtered="onFiltered"
      >
        
        <template v-slot:cell(operation)>
          <span style="cursor: pointer;">详情</span>
          <span style="margin:0 3px;">|</span>
          <span style="cursor: pointer;">删除</span>
        </template>
      </b-table>
    </div>
    <div class="row">
      <div class="col">
        <div class="dataTables_paginate paging_simple_numbers float-right">
          <ul class="pagination pagination-rounded mb-0">
            <!-- pagination -->
            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      ordersData: [
        {
          name: "MySQL-ds",
          example: "MySQL-71-64",
          type: "MySQL",
          createTime: "2022-01-21",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "name", label: "数据源名称" },
        { key: "example", label: "数据源实例" },
        { key: "type", label: "数据源类型" },
        { key: "createTime", label: "创建时间" },
        { key: "operation", label: "操作" },
      ],
    }
  },
  watch: {
    "currentPage":{
      handler(){
        console.log("触发分页");
      }
    }
  },
  methods: {
    onFiltered(){},
    addDataSource(){
      this.$router.push('/datahouse/addDataSource')
    },
  }
}
</script>
<style lang="scss" scoped>

</style>
